Feature · image-optimisation
Image optimisation
Upload the original once and the CDN resizes and converts it on the fly: one image_url filter in the template, or two parameters on the URL, and a 4 MB photo is a 96 kB webp.
Two parameters
cutoutonce one pass, holds
Cutout on a citron ground: Chrome with the Kererū site open and DevTools docked to the right on the Elements panel, the hero image's img selected, cropped through the page on the left and running off the bottom. The cursor arrives on the src value and Chrome's image tooltip reads the original, 4000 × 2667 and 3.8 MB; a double-click opens the attribute, ?width=1200&format=webp is typed onto the CDN URL, Enter, the page's image repaints and the tooltip comes back at 1200 × 800 and 96.4 kB. Same picture, a fortieth of the bytes. At card width the page is dropped and the panel fills the frame.
views/components/visuals/image-optimisation/c1.html
Static · three placements
Architecture · Te Whanganui-a-Tara
Architecture for the long light.
Houses, studios and civic rooms shaped by the way the sun crosses them.
<!DOCTYPE html>
▼<html lang="en" class="js">
▶<head>…</head>
▼<body class="antialiased">
▶<header class="site-header">…</header>
▼<main>
▼<section class="hero">
▶<h1 class="hero-title">…</h1>
▶<p class="hero-lede">…</p>
▼<figure class="hero-media">
<img src="https://cdn.blutui.com/uploads/kereru/hero.jpg
"?width=1200&format=webp" alt="Kererū studio at dusk" class="hero-img" width="1200" height="800">== $0
</figure>
</section>
▶<section class="projects">…</section>
</main>
▶<footer class="site-footer">…</footer>
</body>
</html>
Rendered size1200 × 800 px
Intrinsic size4000 × 2667 px
File size3.8 MB
Current sourcehttps://cdn.blutui.com/uploads/kereru/hero.jpg
Rendered size1200 × 800 px
Intrinsic size1200 × 800 px
File size96.4 kB
Current sourcehttps://cdn.blutui.com/uploads/kereru/hero.jpg?width=1200&format=webp
element.style {
}
.hero-img {global.css:214
width: 100%;
height: auto;
display: block;
}
img, video {global.css:38
max-width: 100%;
height: auto;
}
Architecture · Te Whanganui-a-Tara
Architecture for the long light.
Houses, studios and civic rooms shaped by the way the sun crosses them.
<!DOCTYPE html>
▼<html lang="en" class="js">
▶<head>…</head>
▼<body class="antialiased">
▶<header class="site-header">…</header>
▼<main>
▼<section class="hero">
▶<h1 class="hero-title">…</h1>
▶<p class="hero-lede">…</p>
▼<figure class="hero-media">
<img src="https://cdn.blutui.com/uploads/kereru/hero.jpg
"?width=1200&format=webp" alt="Kererū studio at dusk" class="hero-img" width="1200" height="800">== $0
</figure>
</section>
▶<section class="projects">…</section>
</main>
▶<footer class="site-footer">…</footer>
</body>
</html>
Rendered size1200 × 800 px
Intrinsic size4000 × 2667 px
File size3.8 MB
Current sourcehttps://cdn.blutui.com/uploads/kereru/hero.jpg
Rendered size1200 × 800 px
Intrinsic size1200 × 800 px
File size96.4 kB
Current sourcehttps://cdn.blutui.com/uploads/kereru/hero.jpg?width=1200&format=webp
element.style {
}
.hero-img {global.css:214
width: 100%;
height: auto;
display: block;
}
img, video {global.css:38
max-width: 100%;
height: auto;
}
Architecture · Te Whanganui-a-Tara
Architecture for the long light.
Houses, studios and civic rooms shaped by the way the sun crosses them.
<!DOCTYPE html>
▼<html lang="en" class="js">
▶<head>…</head>
▼<body class="antialiased">
▶<header class="site-header">…</header>
▼<main>
▼<section class="hero">
▶<h1 class="hero-title">…</h1>
▶<p class="hero-lede">…</p>
▼<figure class="hero-media">
<img src="https://cdn.blutui.com/uploads/kereru/hero.jpg
"?width=1200&format=webp" alt="Kererū studio at dusk" class="hero-img" width="1200" height="800">== $0
</figure>
</section>
▶<section class="projects">…</section>
</main>
▶<footer class="site-footer">…</footer>
</body>
</html>
Rendered size1200 × 800 px
Intrinsic size4000 × 2667 px
File size3.8 MB
Current sourcehttps://cdn.blutui.com/uploads/kereru/hero.jpg
Rendered size1200 × 800 px
Intrinsic size1200 × 800 px
File size96.4 kB
Current sourcehttps://cdn.blutui.com/uploads/kereru/hero.jpg?width=1200&format=webp
element.style {
}
.hero-img {global.css:214
width: 100%;
height: auto;
display: block;
}
img, video {global.css:38
max-width: 100%;
height: auto;
}
Animated · once
Architecture · Te Whanganui-a-Tara
Architecture for the long light.
Houses, studios and civic rooms shaped by the way the sun crosses them.
<!DOCTYPE html>
▼<html lang="en" class="js">
▶<head>…</head>
▼<body class="antialiased">
▶<header class="site-header">…</header>
▼<main>
▼<section class="hero">
▶<h1 class="hero-title">…</h1>
▶<p class="hero-lede">…</p>
▼<figure class="hero-media">
<img src="https://cdn.blutui.com/uploads/kereru/hero.jpg
"?width=1200&format=webp" alt="Kererū studio at dusk" class="hero-img" width="1200" height="800">== $0
</figure>
</section>
▶<section class="projects">…</section>
</main>
▶<footer class="site-footer">…</footer>
</body>
</html>
Rendered size1200 × 800 px
Intrinsic size4000 × 2667 px
File size3.8 MB
Current sourcehttps://cdn.blutui.com/uploads/kereru/hero.jpg
Rendered size1200 × 800 px
Intrinsic size1200 × 800 px
File size96.4 kB
Current sourcehttps://cdn.blutui.com/uploads/kereru/hero.jpg?width=1200&format=webp
element.style {
}
.hero-img {global.css:214
width: 100%;
height: auto;
display: block;
}
img, video {global.css:38
max-width: 100%;
height: auto;
}
Overrides none — the file's own defaults